<template>
  <div style="cursor: pointer;" @click="goArticleDetail">
    <el-card class="box-card">
      <div slot='header'>
        <el-row :gutter='10'>
          <el-col :span='24'>
            <h2>
              {{ articleData.title }}
              <el-tag style='margin-left: 10px;' type="danger" v-if="!articleData.approved">未审核</el-tag>
            </h2>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <i>简介：{{ articleData.description }}</i>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-image style="width: 100%;" v-if="articleData.cover" :src="articleData.cover">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="1">
          <el-avatar :src="articleData.author.avatar"/>
        </el-col>
        <el-col :span="5">
          <strong>{{ articleData.author.userName || '作者' }}</strong>
        </el-col>
        <el-col :span="6" :offset="4">
          <p style="color: #8c939d;">发表于：{{ articleData.lastModified | timeFormat }}</p>
        </el-col>
        <el-col :span="6" :offset="3">
          <p class="icons">
            <span class="iconfont good"> {{ articleData.likes }}</span>
            <span class="iconfont view"> {{ articleData.views }}</span>
            <span class="iconfont comments"> {{ articleData.comment.length }}</span>
          </p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
/**
 * 全局组件 博客列表组件
 */
import Filters from '@/tools/Filters'
export default {
  name: "ArticleList",
  props: {
    articleData: {
      type: Object,
      default() {
        return {
          title: '标题',
          tags: [],
          description: '简介',
          cover: '',
          content: '',
          comment: [],
          author_id: undefined,
          author: {},
          lastModified: new Date(),
          views: 0,
          likes: 0,
          blogId: 1,
          approved: true
        }
      }
    }
  },
  filters: {
    timeFormat: Filters.timeFormat
  },
  methods: {
    // 点击跳转到文章详情页
    goArticleDetail() {
      this.$router.push(`/article/${this.articleData.blogId}`)
    }
  }
}
</script>

<style scoped>

p, p>span, strong{
  font-size: 20px;
}

.el-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

p.icons {
  display: flex;
  justify-content: end;
}
p.icons span{
  display: inline-block;
  margin-left: 10px;
  color: gray;
}

h2{
  display: flex;
  align-items: center;
  margin: 0;
}
</style>
